<template>
  <div class="nav-header">
    <div class="logo">
      <svg
        class="heart-icon"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
      </svg>
      <span class="logo-text">智慧医疗</span>
    </div>
    <nav class="nav-menu">
      <ul>
        <li
          v-for="(item, index) in menuList"
          :key="index"
          :class="{ active: isActive(item.path) }"
        >
          <router-link :to="item.path">{{ item.label }}</router-link>
        </li>
      </ul>
    </nav>
    <div class="login-btn">
      <router-link to="/Login">登录/注册</router-link>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();

const menuList = [
  { path: '/', label: '首页' },
  { path: '/yonghu/online-registration', label: '在线挂号' },
  { path: '/yonghu/my-appointments', label: '我的预约' },
  { path: '/yonghu/hospital-info', label: '医院信息' }
];

const isActive = (path) => {
  return router.currentRoute.value.path === path;
};
</script>

<style scoped>
.nav-header {
  /* 关键：固定定位实现置顶，top:0 让导航栏贴顶，z-index 设高避免被覆盖 */
  position: fixed; 
  top: 0;
  left: 0;
  right: 0;
  z-index: 999; 
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background-color: #fff; /* 加背景色，防止滚动后下方内容透过 */
}

.logo {
  display: flex;
  align-items: center;
}

.heart-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  color: #165DFF ; 
}

.logo-text {
  font-size: 20px;
  font-weight: bold;
  color: #165DFF ; 
}

.nav-menu ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li {
  margin: 0 15px;
}

.nav-menu li a {
  text-decoration: none;
  color: #333;
  padding: 5px 0;
}

.nav-menu li.active a {
  color: #165DFF ; 
  border-bottom: 2px solid #165DFF ; 
}

.login-btn a {
  text-decoration: none;
  color: #fff;
  background-color: #165DFF ; 
  padding: 8px 16px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.login-btn a:hover {
  background-color: #409eff; 
}
</style>